import {
  Card,
  Space,
  Modal,
} from 'antd';
import Table, { ColumnsType } from 'antd/es/table';

import { toYuan } from '@/utils/format-number';

const payTypeMap: any = {
  1: '微信',
  2: '支付宝',
  3: 'paypal',
  4: '余额',
  5: '线下支付',
  6: '平台奖励',
  7: '提现驳回',
};

const sendTypeMap: any = {
  1: '申通快递',
  2: 'China Post Registered Air Mail',
  3: '圆通快递',
  4: '顺风快递',
  5: 'DHL',
  8: 'Epacket',
  9: '上门自提',
};

const statusMap: any = {
  0: '待付款',
  1: '待发货',
  8: '待收货',
  9: '已关闭',
};

export default function DetailPage({ onOk, onCancel, showDetail, detail }:any) {

  const columns: ColumnsType<any> = [
    { title: '订单编号', dataIndex: 'orderNumber', align: 'center', width: 120 },
    {
      title: '订单状态',
      dataIndex: 'status',
      align: 'center',
      width: 120,
      render: (status) => <div>{statusMap[status]}</div>,
    },
    {
      title: '付款方式',
      dataIndex: 'payType',
      align: 'center',
      width: 120,
      render: (payType) => <div>{payTypeMap[payType]}</div>,
    },
    {
      title: '订单金额',
      dataIndex: 'totalPrice',
      align: 'center',
      width: 140,
      render: (_, row) => {
        return <div className="flex flex-col">
            <div>平台原价：{toYuan(row.totalPrice)}</div>
            <div>优惠券金额：{toYuan(row.couponMoney)}</div>
            <div>优惠后金额：{toYuan(row.price)}</div>
            <b>最终价格：{toYuan(row.finalPrice)}</b>
            <div>（运费：{toYuan(row.freight)}）</div>
          </div>;
      },
    },
    { title: '下单时间', dataIndex: 'createTime', align: 'center', width: 200 },
    {
      title: '运费',
      dataIndex: 'freight',
      align: 'center',
      width: 120,
      render: (freight) => <div>{toYuan(freight)}</div>,
    },
    {
      title: '物流信息',
      dataIndex: 'sendType',
      align: 'center',
      width: 80,
      render: (sendType) => <div>{sendTypeMap[sendType]}</div>,
    },
    {
      title: '订单备注',
      dataIndex: 'remark',
      align: 'center',
      width: 80,
    },
  ];

  const columnsShip: ColumnsType<any> = [
    { title: '收货人', dataIndex: 'contactName', align: 'center', width: 120 },
    { title: '手机号', dataIndex: 'mobile', align: 'center', width: 120 },
    { title: '邮编', dataIndex: 'zip', align: 'center', width: 120 },
    {
      title: '地址', dataIndex: 'orderNumber', align: 'center', width: 120, render: (_, row) => {
      return <div>{row.pcdText} {row.address}</div>;
    } },
  ];

  const columnsDetail: ColumnsType<any> = [
    { title: '订单编号', dataIndex: 'orderNumber', align: 'center', width: 120 },
    { title: '产品编号', dataIndex: 'fpId', align: 'center', width: 120 },
    {
      title: '图片', dataIndex: 'thumbnail', align: 'center', width: 120, render: (val) => {
        return <div className='flex gap-[10px]'>
          {JSON.parse(val).map((item: any) => {
            return <img src={item} alt="img" width="80px" height="auto" />;
          })}
        </div>;
    } },
    {
      title: '商品', dataIndex: 'orderNumber', align: 'center', width: 120, render: (_, row) => {
        return <div className='flex flex-col'>
          <div>名称：{row.title}</div>
          <div>尺码：{row.size}</div>
          <div>颜色：{row.color}</div>
        </div>;
      }
    },
    {
      title: '价格', dataIndex: 'price', align: 'center', width: 120, render: (val) => {
      return <div>{toYuan(val)}</div>;
      }
    },
    { title: '数量', dataIndex: 'num', align: 'center', width: 120 },
    {
      title: '总价', dataIndex: 'subTotal', align: 'center', width: 120, render: (val) => {
      return <div>{toYuan(val)}</div>;
      }
    },
  ];


  return (
    <Modal title="订单详情" open={showDetail} width='90%' onOk={() => onOk()} onCancel={() => onCancel()}>
    <Space direction="vertical" size="large" className="w-full">
        <Card title="订单信息">
          <Table
          size="small"
            columns={columns}
            pagination={false}
          dataSource={[detail.order]}
        />
        </Card>
        
        <Card title="收货信息" >
          <Table
          size="small"
            columns={columnsShip}
            pagination={false}
          dataSource={[detail.memberAddress]}
        />
        </Card>

        <Card title="订单详情" >
          <Table
          size="small"
            columns={columnsDetail}
            pagination={false}
          dataSource={detail.detailList}
        />
        </Card>
      </Space>
    </Modal>
  );
}